<template>
	<view class="categoryContainer">
		<view class="header">
			<!-- 头部搜索 -->
			<view class="headerSearch">
				<view class="searchList">
					<text class="iconfont search searchIcon"></text>
					<input class="searchIpt" type="text" placeholder="商品名/品牌/订单号/型号等">
					<view class="searchBtn" size="mini">搜索</view>
				</view>
				<text class="tel iconfont kefu"></text>
			</view>
			<!-- 头部分类 -->
			<view class="headerNav">
				<view class="navItem active">分类选型</view>
				<view class="navItem">品牌选型</view>
			</view>
		</view>
		<view class="main">
			<view class="mainLeft">
				<scroll-view class="leftNav" scroll-y="true" enable-flex>
					<view class="navItem" 
					:class="{active:currentId === selectCategory.id}"
					v-for="selectCategory in selectCategoryData" 
					@click="changeNav(selectCategory.id)"
					:key="selectCategory.id">{{selectCategory.name}}</view>
				</scroll-view>
			</view>
			<view class="mainRight">
					<scroll-view class="rightContent" scroll-y="true" enable-flex show-scrollbar="false">
						<view class="recommentBrand" v-if="!!brandList.length">
							<view class="recommentTitle">推荐品牌</view>
							<view class="brandImgList">
								<view class="brandImg" v-for="brand in brandList" :key="brand.brandId">
									<image :src="brand.logo"></image>
								</view>
							</view>
						</view>
						
						<view class="categoryList" v-for="brandShort1 in brandShortList" :key="brandShort.id">
							<view class="categoryTitle">{{brandShort1.name}}</view>
							<view class="itemList">
								<view class="categoryItem" v-for="brandShort2 in brandShort1.childrens">{{brandShort2.name}}</view>
							</view>
						</view>
					
					</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		name:'Category',
		data() {
			return {
				currentId : 0,
				brandList : [],
				brandShortList:[]
			}
		},
		mounted(){
			this.getSelectCategoryData()
		},
		methods: {
			 getSelectCategoryData(){
				this.$store.dispatch('selectCategory/getSelectCategoryData')
			},
			changeNav(id){
				this.currentId = id;
			}
		},
		computed:{
			...mapState('selectCategory',['selectCategoryData']),
		},
		watch : {
				selectCategoryData : {
						 immediate : true,  //初始化时，让handler调用一下
						handler(newValue,oldValue){
								this.currentId = newValue[0].id
						},
				},
				currentId:{
					immediate:true,//初始化时让handler调用一下
					handler(newVal,oldNew){
					this.brandList =	this.selectCategoryData.find(item => item.id === newVal).brand 
					this.brandShortList = this.selectCategoryData.find(item => item.id === newVal).childrens 
					}
				}
		},
	}
</script>

<style lang="stylus">
.categoryContainer
	.header
		width: 100%
		height: 180upx
		background-color: #ff3a34
		position: fixed
		z-index: 999
		// 头部搜索样式
		.headerSearch
			display: flex
			justify-content:space-evenly
			align-items: center
			height: 90upx
			.searchList
				display: flex
				justify-content: space-around
				align-items: center
				width: 640upx
				height: 60upx
				background-color: #fff
				border-radius: 40upx
				.searchIcon
					line-height: 60upx
					font-size: 46upx
					font-weight: 800
					color: #ccc
				.searchIpt
					width: 342upx
				input
				&::-webkit-input-placeholder
					color: #030303
					font-size: 26upx
				.searchBtn
					width: 60upx
					height: 26upx
					font-size: 28upx
					line-height: 26upx
					padding-left: 20upx
					border-left: 1px solid #ccc
					color: #fa210a
					font-weight: 800
			.tel
				width: 60upx
				height: 60upx
				font-size: 46upx
				font-weight: 800
				color: #fff
				text-align: center
				line-height: 60upx
		// 头部分类样式
		.headerNav
			display: flex
			width: 100%
			height: 80upx
			font-size: 24upx
			color: #fff
			.navItem
				width: 50%
				height: 100%
				text-align: center
				line-height: 80upx
				box-sizing: border-box
				&.active
					border-bottom: 4upx solid #fff
	.main
		display: flex
		position: absolute
		top: 180upx
		.mainLeft
			background-color: #f2f2f0
			width: 210upx
			.leftNav
				&::-webkit-scrollbar
					display: none
					width: 0 !important
					height: 0 !important
					-webkit-appearance: none
					background: transparent
				width: 210upx
				height: calc(100vh - 180upx)
				background-color: #f2f2f0
				.navItem
					width: 100%
					height: 100upx
					font-size: 32upx
					line-height: 100upx
					text-align: center
					&.active
						background-color: #fff
						border-left: 2upx solid #ff3a34
						border-left-width: 8upx	
		.mainRight
			width: 540upx
			.rightContent
				/deep/&::-webkit-scrollbar 
					display: none
					width: 0 !important
					height: 0 !important
					background: transparent
				height: calc(100vh - 180upx)
				.recommentBrand
					width: 540upx
					background-color: #fff
					.recommentTitle
						height: 100upx
						background-color: #fff
						text-align: left
						padding-left: 40upx
						line-height: 100upx
						font-size: 30upx
					.brandImgList
						display: flex
						justify-content: space-around
						flex-wrap: wrap
						width: 540upx
						background-color: #fff
						.brandImg
							width: 200upx
							height: 82upx
							background-color: #f2f2f0
							padding: 9upx 17upx
							box-sizing: border-box
							margin-bottom: 30upx
							image
								width: 166upx
								height: 64upx
				.categoryList
					background-color: #f2f2f0
					width: 540upx
					.categoryTitle
						height: 100upx
						background-color: #fff
						text-align: left
						padding-left: 40upx
						line-height: 100upx
						font-size: 30upx
					.itemList
						display: flex
						flex-wrap: wrap
						.categoryItem
							flex-shrink: 0
							width: 50%
							box-sizing: border-box
							font-size: 26upx
							border-bottom: 2upx solid #e6e6e4
							border-right: 2upx solid #e6e6e4
							line-height: 60upx
							text-align: center
							color: #666
							height: 60upx
			
</style>
